<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="preview-box__box phone form" :class="{'inline-model': inlineModel}">
        <div class="preview-box__body">
            <div class="preview-box__inner">
                <div class="preview-box__title" v-if="!inlineModel">
                    <div class="preview-box__text">手机端预览</div>
                    <div class="preview-box__btn" v-if="previewModel === 'single'">
                        <el-button plain @click="handleClick">切换表格预览</el-button>
                    </div>
                </div>
                <div class="preview-box__inner-body">
                    <div class="preview-box__header">
                        <div class="preview-box__header-title">{{model.name || "-"}}</div>
                        <div class="preview-box__header-desc">{{model.desc || "-"}}</div>
                    </div>
                    <div class="preview-box__form">
                        <ul class="preview-box__form-ul">
                            <template v-for="item in data">
                                <li class="preview-box__form-li" :key="item._key">
                                    <template v-if="['select','cascader','input-date'].includes(item.typeValue)">
                                        <c-input :item="item" :arrow="true" prefix="请选择"></c-input>
                                    </template>
                                    <template v-else-if="item.typeValue === 'location'">
                                        <c-input class="location" :item="{ name: item.name || '所在地址', placeholder: '请选择所在地址', required: item.required}" :arrow="true"></c-input>
                                        <c-input class="location-address" :item="{ name: '详细地址', placeholder: '请输入详细地址'}"></c-input>
                                    </template>
                                    <template v-else-if="item.typeValue.indexOf('upload') !== -1">
                                        <c-input :item="item" class="upload" prefix="请上传">
                                            <template v-if="item.typeValue === 'upload-record'">
                                                <el-button type="danger" class="preview-box__form-upload-button" plain>开始录音</el-button>
                                            </template>
                                            <template v-else>
                                                <div class="preview-box__form-upload-box">
                                                    <i :class="{
                                                        'el-icon-camera': item.typeValue === 'upload-img',
                                                        'el-icon-video-camera': item.typeValue === 'upload-video',
                                                        'el-icon-top': item.typeValue === 'upload-file'
                                                    }"></i>
                                                </div>
                                            </template>
                                        </c-input>
                                    </template>
                                    <template v-else>
                                        <c-input :class="[item.typeValue]" :item="item" prefix="请输入"></c-input>
                                    </template>
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

import CInput from "./c-input.vue";

@Component({
    components: {
        CInput
    }
})
export default class PreviewForm extends Vue {
    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly data!: any | any[];


    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly model!: any;

    @Prop({
        type: Boolean,
        default: false
    })
    readonly inlineModel!: boolean;

    @Prop({
        type: String,
        default: "single"
    })
    readonly previewModel!: string;

    select = "";

    handleClick() {
        this.$emit("change", "table");
    }
}
</script>
